<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Multi-Grid UI demo</title>
		<link href="../css/qs_ui.css" rel="stylesheet" type="text/css" />
		<link href="../css/qs.css" rel="stylesheet" type="text/css" />
		<link href="../css/quote2_yuntao.css" rel="stylesheet" type="text/css" />
		<style>
			.control{width:100%;height:50px;border:1px double #ccc;}
			.control .input{float:left;}
			.control input{margin:16px 0 0 5px;height:18px;width:80px;border:1px solid #ccc;}
			.control .btn{text-align:center;width:100px;float:left;margin:16px 0 0 5px;border:1px solid #ccc;cursor:pointer;height:18px;line-height:15px;}
			.test{width:700px;height:400px;border:1px solid #ccc;}

			
		</style>
		
	</head>
	<body oncontextmenu="return false;">
		<div class="control">
			<div class="input">Records:<input type="text" value="1" class="tVal"/></div>
			<div class="input">Group:<input type="text" value="G1" class="gVal"/></div>
			<div class="input">Group:<input type="checkbox" value="Group"/></div>
			<div class="btn" idkey="addRow">add Row</div>
			<div class="input">w:<input type="text" class="wVal" value="700"/> h:<input type="text" class="hVal" value="400"/></div>
			<div class="btn" idkey="resize">resize</div>
			<div class="btn" idkey="empty">empty</div>
		</div>
		<br/>
		<div class="test"></div>
		<script>
			var idService = new function() {
			    var prefix = 'opt_id_';
			    var index = 0;
			    var minusIndex = -2;
			
			    this.newId = function() {
			        index++;
			        return prefix + index;
			    };
			
			    this.newMinusId = function() {
			        return minusIndex--;
			    };
			};
		</script>
		<script src="../lib/jquery.js" type="text/javascript"></script>
		<script type="text/javascript" src="../js/ui/util.js"></script>
		<script type="text/javascript" src="../js/ui/dragdrop.js"></script>
		<script type="text/javascript" src="../js/ui/scrollpanel.js"></script>
		<script type="text/javascript" src="../js/ui/dataGrid.js"></script>
		<script type="text/javascript" src="../js/ui/multi-DataGrid.js"></script>
		<script>
			var cols=[];
			var defDataCols = [ //{ header: "Name", dataIndex: 'Name'},
		    {
		        header: "Symbol",
		        dataIndex: 'Symbol',
		        dataType: 'string',
		        width: 60
		    },{
		        header: "Last",
		        dataIndex: 'LastPrice',
		        align: "right",
		        dataType: 'float',
		        width: 48
		    }, {
		        header: "Chg",
		        dataIndex: 'Chg',
		        align: "right",
		        dataType: 'float',
		        width: 48
		    }, {
		        header: "Bid",
		        dataIndex: 'BidPrice',
		        align: "right",
		        dataType: 'float',
		        width: 48
		    },{
		        header: "Ask",
		        dataIndex: 'AskPrice',
		        align: "right",
		        dataType: 'float',
		        width: 48
		    },{
		        header: "Vol(mil)",
		        dataIndex: 'Volume',
		        align: "right",
		        dataType: 'float',
		        width: 52
		    },{
				dataIndex: 'Group',
				hide:true
			}];
	
			$('.control').find('.btn').bind('click',function(e){
				var target=$(e.target);
				if (target.attr('idkey') == 'resize') {
					var w = $('.control').find('.wVal').val();
					var h = $('.control').find('.hVal').val();
					resize(parseInt(w), parseInt(h));
				}
				if(target.attr('idkey') == 'empty'){
					multiGrid.empty();
				}
				if(target.attr('idkey') == 'addRow'){
					var ticker=$('.tVal').val();
					var group=$('.gVal').val();
					addRow(ticker,group);
				}
			});

			var builtData=function(count,group){
				var c = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K', 'L'];
				var a = [];
		        for (var i = 0; i < count; i++) {
		            a.push({
		                Symbol: c[(Math.random() * 10 + 1) | 0] + idService.newMinusId(),
		                LastPrice: Math.random() * 10 + 1,
		                BidPrice: Math.random() * 10 + 1,
		                AskPrice: Math.random() * 10 + 1,
		                Chg: Math.random() * 10 + 1,
		                Volume: Math.random() * 10 + 1,
						Group:group
		            })
		        }
		        return a;   
			}
			var addRow=function(count,group){
				var a=builtData(count,group);
				for(var i=0;i<count;i++){
					multiGrid.addRow(a[i],a[i]["Symbol"]);
				}
			}
		
			var resize=function(w,h){
				$('.test').css({
					width: w + "px",
					height: h + "px"
				});
				multiGrid.resize(w,h);
			};
			
			var a=builtData(6,'G1').concat(builtData(12,'G2')).concat(builtData(5,'G3'));
			var multiGrid=new Util.MultiDataGrid('.test',[],{
				columnSeparate:true,
				width:700,
				height:400,
				gColumns:defDataCols,
				gConfig:{
					//groupDataIndex:'Group',
					sortable:true,
					indexColKey:'Symbol'
				}
			},{
				onRowDoubleClick:function(e,row){
					alert("onRowDoubleClick "+row.id);
				},
				onRowContextmenu:function(e,row){
					alert("onRowContextmenu "+row.id);
				}
			});
			//multiGrid.reBindData(a);
			
		</script>
	</body>
</html>
